<template>
  <div class="news_page">
    <div class="news_header">
      <h2>{{ articleData.title }}</h2>
      <p>
        <span>作者：{{ articleData.author_name }}</span
        ><span>时间：{{ articleData.time }}</span>
      </p>
    </div>
    <div class="news_main">
      <h3 v-if="articleData.subheading !== ''">{{ articleData.subheading }}</h3>
      <div v-for="(ifem, i) in articleData.main_content" :key="i" class="clear">
        <p v-if="ifem.substring(0, 1) !== '$'">{{ ifem }}</p>
        <p v-if="ifem.substring(0, 1) == '$'" class="title">
          {{ ifem.substring(1) }}
        </p>
      </div>
    </div>
    <LeaveWord :worksData="worksData"></LeaveWord>
  </div>
</template>

<script>
import axios from "axios";
import LeaveWord from "../../components/LeaveWord.vue";
export default {
  data() {
    return {
      articleData: {},
      id: null,
      worksData: {
        id: 0,
        type: 101,
      },
    };
  },
  components: { LeaveWord },
  created() {
    this.worksData.id = this.$route.query.article;
    this.getArticleData();
  },
  watch: {
    $route: {
      handler() {
        this.id = this.$route.query.article;
        this.getArticleData();
        //深度监听，同时也可监听到param参数变化
      },
      deep: true,
    },
  },
  methods: {
    getArticleData() {
      var article_id = this.$route.query.article;
      axios
        .post(`http://localhost:3000/getArticle`, { id: article_id })
        .then((ret) => {
          ret.data.articleData.main_content =
            ret.data.articleData.main_content.split("//");
          this.articleData = ret.data.articleData;
        });
    },
  },
};
</script>

<style scoped>
.news_page {
  padding: 20px;
}
.news_header {
  border-bottom: 1px solid #dcdfe6;
}
.news_header h2 {
  height: 50px;
  text-align: center;
  font: 26px/50px "";
  font-weight: 700;
}
.news_header p {
  padding: 0 20px;
}
.news_header p span {
  color: #909399;
  padding: 0 20px;
}
.news_main {
  padding: 20px;
  color: #303133;
}
.news_main h3 {
  height: 30px;
  text-align: center;
  font: 20px/30px "";
}

.news_main p {
  font: 18px/40px "";
  margin: 20px 0;
  text-indent: 2em;
}
.news_main p.title {
  font: 20px/40px "";
  text-indent: 0;
  font-weight: 700;
}
</style>
